<template>
	<!-- 评论列表 -->
	<view class="content" style="border-top: 1px solid #eee;">
		<view class="goods-list" v-if="!comment_list_count==0">
			<view class="eva-box" v-for="(item,index) in comment_list" :key="index">
				<view class="eva_box_top">
					<image class="portrait" :src="item.userInfo.avatar" mode="aspectFill"></image>
					<view class="userInfo">
						<text class="name">{{item.userInfo.nickname}}</text>
						<text class="time">{{pingluntime}}</text>
					</view>
					
					<view class="star">
						<text v-for="(item2,index2) in 5" class="iconfont icon-xingxing2" :class="item2<=item.score?'act':''"></text>
					</view>
						
				</view>
				
				<view class="right">
					<view class="con">{{item.content}}</view>
					<view class="img_wrap">
						<view class="img" v-if="item.images">
							<image :src="item.images" mode=""></image>
						</view>
					</view>
					<view class="bot">
						<text class="attr">购买类型：{{item.attr}}</text>
						
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="comment_list_count==0">
			暂无更多
		</view>
		
	</view>
</template>

<script>
	import { timeForm } from '@/utils/TimeFrom.js'; //时间戳转为日期
	export default{
		data(){
			return{
				list:[],
				goods_id:'',//商品id
				comment_list_count:'',//评论的数量
				comment_list:[],//评论列表
				pingluntime:'',//评论时间
				now: new Date().getTime(), // 现在的时间戳
				host: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http'
			}
		},
		onLoad(options) {
			console.log(options);
			this.goods_id=options.goods_id;
		},
		mounted() {
			this.get_comment()
		},
		methods:{
			get_comment(){
				uni.request({
					method:'POST',
					url:this.host+'/api/get_goods_comment',
					data:{
						goods_id:this.goods_id,
						skip:0, //分页开始数
						limit:10 //一次给几条
					},
					success:(res)=>{
						console.log(res)
						this.comment_list_count=res.data.count
						this.comment_list=res.data.data
						console.log(this.comment_list_count);
						console.log(this.comment_list);
						
						for(let i=0;i<this.comment_list.length;i++){
							this.pingluntime = timeForm(this.comment_list[i].add_time, false, this.now);
						}
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	page, .content{
		background:#fff;
	}

	/* 商品列表 */
	.goods-list{
		padding: 20rpx 30rpx ;
		.eva-box {
			display: flex;
			padding: 20upx 0;
			flex-wrap: wrap;
			border-bottom: 1px solid #eee;
			.eva_box_top{
				display: flex;
				width: 100%;
			}
			.portrait {
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				border-radius: 100px;
				box-shadow: 0 0 5px 0.5px #e8e8e8;
			}
			.userInfo{
				display: flex;
				height: 80rpx;
				flex-direction: column;
				margin-left: 20rpx;
				justify-content: space-between;
				
				.time{
					font-size: 12px;
					color: #666;
				}
			}
			.star{
				flex: 1;
				text-align: right;
				text{
					color: #aaa;
					&.act{
						color: #e33b2d;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				font-size: $font-base;
				color: $font-color-base;
				padding-left: 100upx;
				
				.con {
					font-size: $font-base;
					color: $font-color-dark;
					padding: 20upx 0;
				}
				.img_wrap{
					display: flex;
					flex-wrap: wrap;
					
				}
				.img{
					width: 180rpx;
					height: 180rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					image{
						width: 180rpx;
						height: 180rpx;
					}
					
				}
				.bot {
					display: flex;
					justify-content: space-between;
					font-size: $font-sm;
					color: $font-color-light;
				}
			}
		}
	}
	

</style>
